<template>
    <z-paging>
        <u-sticky>
            <hedsty :mrbot="32" :headCentext="'创建房间'"></hedsty>
        </u-sticky>
        <view class="top_red_box" style="background-image: url('https://morgan.dingxians.cn/static/editpic/2.png');">
            <view class="input_box" style="margin-bottom: 30rpx;">
                <view class="left_name">房间名字</view>
                <view class="right_box">
                    <u--input inputAlign="right" type="text" fontSize="14" color="#fff" placeholder="请输入房间名字(必填)"
                        :value="nameValue" @change="namechange"></u--input>
                    <u-icon name="arrow-right" color="rgba(255, 255, 255, .5)" size="18"></u-icon>
                </view>
            </view>
            <view class="input_box" style="margin-bottom: 30rpx;">
                <view class="left_name">进房口令</view>
                <view class="right_box">
                    <u--input type="text" inputAlign="right" fontSize="14" color="#fff" placeholder="请输入房间名字(必填)"
                        :value="codeValue" @change="codechange"></u--input>
                    <u-icon name="arrow-right" color="rgba(255, 255, 255, .5)" size="18"></u-icon>
                </view>
            </view>
            <view class="input_box" style="margin-bottom: 30rpx;">
                <view class="left_name">充值金额</view>
                <view class="right_box">
                    <u--input type="text" inputAlign="right" fontSize="14" color="#fff" placeholder="请输入房间名字(必填)"
                        :value="amountValue" @change="amountValuechange"></u--input>
                    <u-icon name="arrow-right" color="rgba(255, 255, 255, .5)" size="18"></u-icon>
                </view>
            </view>
            <view class="input_box" style="margin-bottom: 30rpx;">
                <view class="left_name">开始时间</view>
                <view class="right_box" @click="openDatetimePicker">
                    <text>{{ start_time || '请选择开始时间' }}</text>
                    <u-icon name="arrow-right" color="rgba(255, 255, 255, .5)" size="18"></u-icon>
                </view>
            </view>
            <view class="input_box" style="margin-bottom: 30rpx;">
                <view class="left_name">结束时间</view>
                <view class="right_box" @click="openDatetimePicker1">
                    <text>{{ end_time || '请选择结束时间' }}</text>
                    <u-icon name="arrow-right" color="rgba(255, 255, 255, .5)" size="18"></u-icon>
                </view>
            </view>
            <view class="input_box" style="margin-bottom: 30rpx;">
                <view class="left_name">房间密码</view>
                <view class="right_box">
                    <u--input type="text" inputAlign="right" fontSize="14" color="#fff" placeholder="请输入"
                        :value="passwValue" @change="paswchange"></u--input>
                    <u-icon name="arrow-right" color="rgba(255, 255, 255, .5)" size="18"></u-icon>
                </view>
            </view>
            <view class="input_box">
                <view class="left_name">活动介绍</view>
                <view class="right_box">
                    <u--input type="text" inputAlign="right" fontSize="14" color="#fff" placeholder="请输入"
                        :value="rewarkValue" @change="rewadkchange"></u--input>
                    <u-icon name="arrow-right" color="rgba(255, 255, 255, .5)" size="18"></u-icon>
                </view>
            </view>
        </view>
        <view class="xianshi_box">
            <view class="big_bxcon_box" v-for="(item, index) in createList" :key="index">
                <view class="dange_sel_shangpin_box" style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/16.png');">
                    <image :src="item.image" mode="heightFix" />
                    <view class="shanchu" @click="deladress(item)"
                        style="background-image: url('https://morgan.dingxians.cn/static/address/2.png');">
                    </view>
                </view>
                <view class="content_name_box">{{ item.name }}</view>
            </view>
            <view class="big_bxcon_box1">
                <view class="dange_sel_shangpin_box1" style="background-image: url('https://morgan.dingxians.cn/static/fuyuri/16.png');">
                    <image src="https://morgan.dingxians.cn/static/fuyuri/15.png" @click="createBtn" mode="heightFix" />
                </view>
            </view>
            <view class="a" style="width: 200rpx;" v-for="i in 2"></view>
        </view>
        <view class="queren_box" @click="submit" style="background-image: url('https://morgan.dingxians.cn/static/editpic/4.png');">
            创建房间
        </view>
        <buuug7-simple-datetime-picker ref="myPicker" @submit="handleSubmit" :start-year="2000" :end-year="2099"
            :time-init="new Date().getTime()" :time-hide="[true, true, true, true, true, false]"
            :time-label="['年', '月', '日', '时', '分']" />
        <buuug7-simple-datetime-picker ref="myPicker1" @submit="handleSubmit1" :start-year="2000" :end-year="2099"
            :time-init="new Date().getTime()" :time-hide="[true, true, true, true, true, false]"
            :time-label="['年', '月', '日', '时', '分']" />
    </z-paging>
</template>
<script>
import hedsty from '../../components/hedsty.vue'
export default {
    components: {
        hedsty
    },
    data() {
        return {
            nameValue: '',
            codeValue: '',
            start_time: '',
            end_time: '',
            passwValue: '',
            rewarkValue: '',
            amountValue:'',
        }
    },
    onLoad() {

    },
    onShow() {

    },
    computed: {
        // 选中的商品id
        selectBonusId() {
            return this.createList.filter(item => {
                return item.flag == true
            }).map(item => {
                return item.id;
            })
        },
        // 选中的商品list用于creat页展示、获取id
        createList() {
            let housArr = [];
            this.$store.state.selHouList.filter(item => {
                return item.flag == true
            }).forEach((item) => {
                housArr.push(item)
            })
            return housArr;
        },
    },
    methods: {
        namechange(e) {
            this.nameValue = e
        },
        codechange(e) {
            this.codeValue = e
        },
        rewadkchange(e) {
            this.rewarkValue = e
        },
        amountValuechange(e) {
            this.amountValue = e
        },
        paswchange(e) {
            this.passwValue = e
        },
        // 打开picker
        openDatetimePicker() {
            this.$refs.myPicker.show();
        },

        // 关闭picker
        closeDatetimePicker() {
            this.$refs.myPicker.hide();
        },

        handleSubmit(e) {
            this.start_time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
        },
        // 打开picker
        openDatetimePicker1() {
            this.$refs.myPicker1.show();
        },

        // 关闭picker
        closeDatetimePicker() {
            this.$refs.myPicker1.hide();
        },

        handleSubmit1(e) {
            this.end_time = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
        },
        createBtn() {
            this.$store.state.selHouList = this.createList
            this.$router('/userPage/fuyuri/select')
        },
        deladress(item) {
            item.flag = false
        },
        submit() {
            if (this.nameValue == '') {
                this.$msg('请输入房间名')
            } else if (this.codeValue == '') {
                this.$msg('请输入房间口令')
            } else if (this.amountValue == '') {
                this.$msg('请输入充值金额')
            } else if (this.rewarkValue == '') {
                this.$msg('请输入房间备注')
            } else if (this.start_time == '') {
                this.$msg('请选择开始时间')
            } else if (this.end_time == '') {
                this.$msg('请选择结束时间')
            }else if (this.selectBonusId.length <= 0) {
                this.$msg('请选择奖品')
            } else {
                let data = {
                    name: this.nameValue,// 房间名
                    word_command: this.codeValue, //口令
                    content: this.rewarkValue,//备注
                    room_password: this.passwValue,//密码
                    start_at: this.start_time,//开始时间
                    begin_reward_num: this.pepValue,//提前开奖人数
                    amount: this.amountValue,//充值金额
                    begin_reward_at: this.end_time,//结束时间
                    goods_id_arr: this.selectBonusId.join(','),//奖品id

                }
                this.$Request.post(this.$api.flw.wealRoomsCreate, data).then(res => {
                    if (res.code == 200) {
                        this.$msg(res.msg)
                        setTimeout(() => {
                            this.$goBack()
                        }, 600);
                    }
                })
            }

        },
    }
}
</script>
<style lang="scss" scoped>
.top_red_box {
    width: 690rpx;
    margin: auto;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 30rpx;
    margin-bottom: 60rpx;

    .input_box {
        width: 100%;
        height: 50rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .left_name {
            height: 50rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 50rpx;
        }

        .right_box {
            height: 50rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #FFFFFF;
            line-height: 50rpx;
            display: flex;
            justify-content: flex-end;
            align-items: center;

            text {
                margin-right: 21rpx;
            }

        }
    }
}

.xianshi_box {
    width: 690rpx;
    margin: auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-height: 600rpx;
    overflow: hidden;
    overflow-y: auto;
    margin-bottom: 30rpx;

    .big_bxcon_box {
        flex-shrink: 0;
        width: 200rpx;
        height: 239rpx;
        margin-bottom: 16rpx;

        .dange_sel_shangpin_box {
            width: 200rpx;
            height: 200rpx;
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            margin-bottom: 16rpx;
            position: relative;

            image {
                height: 170rpx;
            }

            .shanchu {
                width: 30rpx;
                height: 32rpx;
                background-size: 100% 100%;
                position: absolute;
                right: 0rpx;
                top: 0rpx;
            }
        }

        .content_name_box {
            width: 100%;
            height: 23rpx;
            font-family: PingFang SC;
            font-weight: 500;
            font-size: 24rpx;
            color: #FFFFFF;
            line-height: 23rpx;
            text-align: center;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    .big_bxcon_box1 {
        width: 200rpx;
        height: 239rpx;
        margin-bottom: 16rpx;

        .dange_sel_shangpin_box1 {
            width: 200rpx;
            height: 200rpx;
            background-size: 100% 100%;
            display: flex;
            justify-content: center;
            align-items: center;

            image {
                display: block;
                width: 73rpx;
                height: 83rpx;
            }
        }
    }

}

.queren_box {
    width: 529rpx;
    height: 120rpx;
    margin: auto;
    font-family: PingFang SC;
    font-weight: bold;
    font-size: 36rpx;
    color: #FFFFFF;
    line-height: 120rpx;
    text-align: center;
    background-size: 100% 100%;
    transition: transform 0.3s;
}

.queren_box:active {
    transform: scale(0.8);
}
</style>